<!DOCTYPE html>
<html lang="en">
<head>
    <title>在线商品选购</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="no-referrer"/>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial;
            padding: 10px;
            background: #f1f1f1;
        }

        /* 设置页眉的样式 */
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }
        /* 改变鼠标悬停时的颜色 */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }
        /* 创建两个不相等的彼此并排的浮动列 */
        /* 左列 */
        .leftcolumn {
            float: left;
            width: 75%;
        }

        /* 右列 */
        .rightcolumn {
            float: left;
            width: 25%;
            background-color: #f1f1f1;
            padding-left: 20px;
        }

        /* 清除列之后的浮动 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }


        /* 响应式布局 - 创建堆叠而非并排的两列 */
        @media screen and (max-width:600px) {
            .rightcolumn {
                width: 100%;
            }
        }
        /* 响应式布局 - 创建堆叠而非并排的两列 */
        @media screen and (max-width:600px) {
            .leftcolumn {
                width: 100%;
            }
        }
        .column1 {
            float: left;
            width: 33.3%;
            padding: 15px;
        }

        /* 清除列之后的浮动 */
        .row1:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 响应式布局 - 创建堆叠而非并排的三列 */
        @media screen and (max-width:600px) {
            .column1 {
                width: 100%;
            }
        }
        ul .a{
            list-style-type: circle;
        }
        a:link, a:visited {
            background-color: #fc867d;
            color: white;
            padding: 14px 25px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }

        a:hover, a:active {
            background-color: red;
        }
        /* 页脚 */
        .footer {
            padding: 20px;
            text-align: center;
            background: #ddd;
            margin-top: 20px;
        }

    </style>
</head>
<body>

<div class="header">
    <h1>杂货店</h1>
    <p>
        <img src="f1.jpeg" width="512" height="220" />
    </p>
</div>

<div class="row">
    <div class="leftcolumn">
        <h2 id="sj">书籍</h2>
        <div class="row1">
            <div class="column1">
                <ul class="a">
                    <p>
                        <li>情书</li>
                        <img src="qingshu.jpeg" width="200" height="150" />
                        <li>人间失格</li>
                        <img src="renjianshige.jpeg" width="200" height="150" />
                        <li>人间词话</li>
                        <img src="renjian.jpeg" width="200" height="150" />
                    </p>
                </ul>
             </div>
            <div class="column1">
                <ul class="a">
                    <p>
                        <li>老人与海</li>
                        <img src="laorenyuhai.jpeg" width="200" height="150" />
                        <li>我是猫</li>
                        <img src="woshimao.jpeg" width="200" height="150" />
                        <li>忏悔录</li>
                        <img src="chanhuilu.jpeg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                      <li>罗生门</li>
                      <img src="luoshengmen.jpeg" width="200" height="150" />
                      <li>巴黎圣母院</li>
                      <img src="paris.jpeg" width="200" height="150" />
                      <li>挪威的森林</li>
                      <img src="nuowei.jpeg" width="200" height="150" />
                    </p>
                </ul>
            </div>

        </div>
        <h2 id="ph">手机</h2>
        <div class="row1">
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>iPhone14</li>
                    <img src="iPhone14.jpg" width="200" height="150" />
                    <li>iPhone14 pro</li>
                    <img src="iPhone14p.jpg" width="200" height="150" />
                    <li>iPhone14 pro max</li>
                    <img src="iPhone14pm.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>HUAWEI P50</li>
                    <img src="p50.jpg" width="200" height="150" />
                    <li>HUAWEI MATE50</li>
                    <img src="m50.jpg" width="200" height="150" />
                    <li>HUAWEI NAVA10</li>
                    <img src="n10.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>Xiaomi 12</li>
                    <img src="12.jpg" width="200" height="150" />
                    <li>Xiaomi Civi 1S</li>
                    <img src="1s.jpg" width="200" height="150" />
                    <li>Xiaomi MIX Fold 2</li>
                    <img src="mf2.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>

        </div>
        <h2 id="dn">电脑</h2>
        <div class="row1">
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>联想拯救者 Y7000P</li>
                    <img src="y7000p.jpg" width="200" height="150" />
                    <li>联想小新 Pro16</li>
                    <img src="pro16.jpg" width="200" height="150" />
                    <li>联想拯救者 R9000X</li>
                    <img src="r9000x.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>华硕天选3</li>
                    <img src="hs3.jpg" width="200" height="150" />
                    <li>华硕无畏15</li>
                    <img src="hs15.jpg" width="200" height="150" />
                    <li>华硕灵耀pro14</li>
                    <img src="hsp14.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>光影精灵8</li>
                    <img src="hpgy8.jpg" width="200" height="150" />
                    <li>星14 pro</li>
                    <img src="hpx14.jpg" width="200" height="150" />
                    <li>ENVY 14</li>
                    <img src="hpenvy14.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>

        </div>
        <h2 id="yf">衣服</h2>
        <div class="row1">
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>it卫衣</li>
                    <img src="it1.jpg" width="200" height="150" />
                    <li>it衬衫</li>
                    <img src="it2.jpg" width="200" height="150" />
                    <li>it夹克</li>
                    <img src="it3.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>it短裤</li>
                    <img src="it4.jpg" width="200" height="150" />
                    <li>itT恤</li>
                    <img src="it5.jpg" width="200" height="150" />
                    <li>clotT恤</li>
                    <img src="clot1.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>clot卫衣</li>
                    <img src="clot2.jpg" width="200" height="150" />
                    <li>clot休闲裤</li>
                    <img src="clot3.jpg" width="200" height="150" />
                    <li>clot夹克</li>
                    <img src="clot4.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>

        </div>
        <h2 id="sp">食品</h2>
        <div class="row1">
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>良品铺子</li>
                    <img src="lppz.jpg" width="200" height="150" />
                    <li>百草味</li>
                    <img src="bcw.jpg" width="200" height="150" />
                    <li>卡乐比</li>
                    <img src="klb.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>母亲牛肉干</li>
                    <img src="mqnrg.jpg" width="200" height="150" />
                    <li>乐事</li>
                    <img src="ls.jpg" width="200" height="150" />
                    <li>周黑鸭</li>
                    <img src="zhy.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>卫龙</li>
                    <img src="wl.jpg" width="200" height="150" />
                    <li>阿华田</li>
                    <img src="aht.jpg" width="200" height="150" />
                    <li>奥利奥</li>
                    <img src="ala.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>

        </div>
        <h2 id="cw">宠物</h2>
        <div class="row1">
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>柴犬</li>
                    <img src="cq.jpg" width="200" height="150" />
                    <li>萨摩耶幼犬</li>
                    <img src="smy.jpg" width="200" height="150" />
                    <li>缅因猫</li>
                    <img src="mym.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>拉布拉多</li>
                    <img src="lbld.jpg" width="200" height="150" />
                    <li>柯基</li>
                    <img src="kj.jpg" width="200" height="150" />
                    <li>阿拉斯加</li>
                    <img src="alsj.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>德牧</li>
                    <img src="dm.jpg" width="200" height="150" />
                    <li>杜宾</li>
                    <img src="db.jpg" width="200" height="150" />
                    <li>阿比西亚</li>
                    <img src="abxy.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
        </div>
        <h2 id="yy">医药</h2>
        <div class="row1">
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>999感冒灵</li>
                    <img src="999.jpg" width="200" height="150" />
                    <li>枇杷膏</li>
                    <img src="ppg.jpg" width="200" height="150" />
                    <li>云南白药气雾剂</li>
                    <img src="ynby.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>肠炎宁片</li>
                    <img src="cynp.jpg" width="200" height="150" />
                    <li>维生素C泡腾片</li>
                    <img src="wssc.jpg" width="200" height="150" />
                    <li>肛泰</li>
                    <img src="gt.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>他达拉非片</li>
                    <img src="tdlfp.jpg" width="200" height="150" />
                    <li>二陈丸</li>
                    <img src="ecw.jpg" width="200" height="150" />
                    <li>止咳宝片</li>
                    <img src="zcbp.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
        </div><h2 id="jj">家具</h2>
        <div class="row1">
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>衣柜</li>
                    <img src="yg.jpg" width="200" height="150" />
                    <li>桌椅</li>
                    <img src="zy.jpg" width="200" height="150" />
                    <li>梳妆台</li>
                    <img src="szt.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>茶台</li>
                    <img src="ct.jpg" width="200" height="150" />
                    <li>沙发</li>
                    <img src="sf.jpg" width="200" height="150" />
                    <li>地柜</li>
                    <img src="dg.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>双人床</li>
                    <img src="src.jpg" width="200" height="150" />
                    <li>储物柜子</li>
                    <img src="cwgz.jpg" width="200" height="150" />
                    <li>饭桌</li>
                    <img src="fz.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
        </div><h2 id="wj">玩具</h2>
        <div class="row1">
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>竹蜻蜓手枪</li>
                    <img src="zqtsj.jpg" width="200" height="150" />
                    <li>乐高赛车</li>
                    <img src="lgsc.jpg" width="200" height="150" />
                    <li>益智地球模型</li>
                    <img src="yzdqmx.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>奥特曼礼盒</li>
                    <img src="atmlh.jpg" width="200" height="150" />
                    <li>宇航员积木</li>
                    <img src="yhyjm.jpg" width="200" height="150" />
                    <li>小黄鸭子</li>
                    <img src="xhyz.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>
            <div class="column1">
                <ul class="a">
                    <p>
                    <li>牛顿摆球</li>
                    <img src="ndbq.jpg" width="200" height="150" />
                    <li>铁皮青蛙</li>
                    <img src="tpqw.jpg" width="200" height="150" />
                    <li>尖叫鸡</li>
                    <img src="jjj.jpg" width="200" height="150" />
                    </p>
                </ul>
            </div>

        </div>
    </div>

    <div class="rightcolumn">
        <h2>商品类别链接</h2>
            <ul>
                <li>
                    <a href="#sj" >书籍</a>
                </li>
                <li>
                    <a href="#ph" >手机</a>
                </li>
                <li>
                    <a href="#dn" >电脑</a>
                </li>
                <li>
                    <a href="#yf" >衣服</a>
                </li>
                <li>
                    <a href="#sp" >食品</a>
                </li>
                <li>
                    <a href="#cw" >宠物</a>
                </li>
                <li>
                    <a href="#yy" >医药</a>
                </li>
                <li>
                    <a href="#jj" >家具</a>
                </li>
                <li>
                    <a href="#wj" >玩具</a>
                </li>
            </ul>
    </div>
</div>
    <div class="footer">
        <p>网站的内容仅用于学习和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。</p>
        <a href="http://localhost:63342/WebProject/web/%E5%95%86%E5%93%81%E9%80%89%E8%B4%AD/%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2.html?_ijt=mmpspnq9tto1dop3hls53bai34" target="_blank">注册</a>

    </div>
</body>
</html>